import '@/pages/Front/index.scss'

import { MoonOutlined, SunOutlined } from '@ant-design/icons'
import { useAppDispatch, useAppSelector } from '@/store/hooks'

import { changeTheme } from '@/store/modules/front'

export default function Theme() {
  // 获取redux数据
  const { currentTheme } = useAppSelector((state) => state.front)

  const dispatch = useAppDispatch()

  // 切换主题色
  const updateTheme = (theme: string) => {
    dispatch(changeTheme(theme))
  }

  return (
    <span>
      <SunOutlined
        className={currentTheme == 'dark' ? 'sunmoonbtn' : 'none'}
        onClick={() => {
          updateTheme('light')
        }}
        style={{
          fontSize: '16px',
          height: 64,
          position: 'absolute',
          right: 150
        }}
      />
      <MoonOutlined
        className={currentTheme == 'dark' ? 'none' : 'sunmoonbtn'}
        onClick={() => {
          updateTheme('dark')
        }}
        style={{
          fontSize: '16px',
          height: 64,
          position: 'absolute',
          right: 150
        }}
      />
    </span>
  )
}
